<template>
  <div class="designer-container" v-if="swiperList.length">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div>
        <div class="swiper-container">
          <div class="dds">
            <div>
              <span class="search" @click="$router.push({path: '/home/search'})">
                <img src="@/assets/images/HOME_ss.png" alt />
              </span>
              <span class="clock" @click="$router.push({path: '/designer/filtrate'})">
                <img src="@/assets/images/icon_saixuan.png" alt />
              </span>
            </div>
          </div>
          <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide v-for="(item, index) of swiperList" :key="index">
              <a :href="item.link">
                <img :src="item.image" alt />
              </a>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
        <div class="content">
          <div v-for="(item, index) of designerList" :key="index" class="designer-item">
            <panel-item-designer
              :designerInfo="item"
              @click.native="$router.push({path: '/designer/home-page', query: {id: item.id}})"
            />
          </div>
        </div>
      </div>
    </van-list>
    <transition name="slide">
      <router-view @filtrate="handleFiltrate" @filterLeave="handleFilterLeave"></router-view>
    </transition>
  </div>
</template>
<script>
import PanelItemDesigner from '@/components/panel-item-desinger'
import { getDesignerList, getSwiperList } from '@/api/home'
const ERR_OK = 200
export default {
  name: 'Designer',
  components: {
    PanelItemDesigner
  },
  data () {
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        observer: true,
        observeParents: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        }
      },
      loading: false,
      finished: false,
      designerList: [],
      total: 0,
      page: 1,
      form: {
        rate: '',
        form: '',
        style: ''
      },
      swiperList: []
    }
  },
  watch: {},
  mounted () {},
  created () {
    this._getDesignerList(
      this.page,
      this.form.rate,
      this.form.form,
      this.form.style
    )
    this._getSwiperList()
  },
  beforeRouteEnter (to, from, next) {
    // ...
    window.scrollTo(0, 0)
    next(vm => {
      if (vm.$data.form.rate || vm.$data.form.form || vm.$data.form.style) {
        vm._getDesignerList()
        vm.$data.form.rate = ''
        vm.$data.form.form = ''
        vm.$data.form.style = ''
      }
    })
  },
  methods: {
    handleFilterLeave () {
      this.page = 1
      this.form.rate = ''
      this.form.form = ''
      this.form.style = ''
      this._getDesignerList()
    },
    handleFiltrate (params) {
      this.page = 1
      this.designerList = []
      this.total = 0
      this.form.rate = params.rate
      this.form.form = params.form
      this.form.style = params.style
      this._getDesignerList(
        this.page,
        this.form.rate,
        this.form.form,
        this.form.style
      )
    },
    onLoad () {
      this.page++
      this._getDesignerList(
        this.page,
        this.form.rate,
        this.form.form,
        this.form.style
      ).then(() => {
        this.hasMore()
      })
    },
    hasMore () {
      if (this.designerList.length >= this.total) {
        this.loading = false
        this.finished = true
      } else {
        this.loading = true
        this.finished = false
      }
    },
    _getDesignerList (page, rate, form, style) {
      return getDesignerList(page, rate, form, style)
        .then(res => {
          if (res.code === ERR_OK) {
            this.designerList = this.designerList.concat(res.data.data)
            this.total = res.data.total

            return Promise.resolve()
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getSwiperList () {
      getSwiperList(2)
        .then(res => {
          if (res.code === ERR_OK) {
            this.swiperList = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";

.designer-container {
  .swiper-container {
    width: 100%;
    // height: 5.2rem;
    img {
      width: 100%;
    }
  }
  .content {
    padding: 0.7rem 0.36rem 0 0.36rem;
    box-sizing: border-box;
    .designer-item {
      margin-bottom: 0.66rem;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
  .list-scroll {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 1.22rem;
  }
}

.swiper-container /deep/ .swiper-pagination-bullet {
  width: 0.12rem;
  height: 0.12rem;
  background: #808080;
  border-radius: 50%;
  transition: all 0.3s;
}
.swiper-container /deep/ .swiper-pagination-bullet-active {
  width: 0.46rem;
  height: 0.12rem;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.06rem;
}
.swiper-container /deep/ .swiper-pagination {
  position: absolute;
  left: 0.45rem;
  bottom: 0.45rem;
  width: auto;
}
.dds {
  width: 100%;
  padding: 0.38rem 0.38rem 0 0.38rem;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  span {
    display: inline-block;
    img {
      vertical-align: top;
    }
  }
  .search {
    width: 0.34rem;
    height: 0.34rem;
    margin-right: 0.28rem;
    img {
      width: 100%;
    }
  }
  .clock {
    width: 0.32rem;
    height: 0.36rem;
    img {
      width: 100%;
    }
  }
}
@include slideEnter();
</style>
